<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h2>欢迎回来，{{ userInfo.name || '管理员' }}</h2>
      <p>今天是 {{ currentDate }}，祝您工作愉快！</p>
    </div>
    
    <div class="dashboard-stats">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: #409EFF;">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">1,234</div>
                <div class="stat-label">总客户数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: #67C23A;">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">89</div>
                <div class="stat-label">本月合同</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: #E6A23C;">
                <el-icon><Money /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">¥2.5M</div>
                <div class="stat-label">本月回款</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" style="background: #F56C6C;">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">+23%</div>
                <div class="stat-label">环比增长</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <div class="dashboard-charts">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>销售趋势</span>
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  size="small"
                  style="width: 240px"
                />
              </div>
            </template>
            <div ref="trendChart" style="height: 300px"></div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>客户来源分布</span>
              </div>
            </template>
            <div ref="sourceChart" style="height: 300px"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <div class="dashboard-tables">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>待跟进客户</span>
                <el-button type="primary" link>查看全部</el-button>
              </div>
            </template>
            <el-table :data="pendingCustomers" style="width: 100%">
              <el-table-column prop="name" label="客户名称" />
              <el-table-column prop="contact" label="联系方式" />
              <el-table-column prop="nextFollow" label="下次跟进" />
              <el-table-column label="操作" width="80">
                <template #default>
                  <el-button type="primary" link>跟进</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>业绩排行</span>
                <el-button type="primary" link>查看全部</el-button>
              </div>
            </template>
            <el-table :data="performanceRank" style="width: 100%">
              <el-table-column prop="rank" label="排名" width="60" />
              <el-table-column prop="name" label="销售员" />
              <el-table-column prop="amount" label="销售额" />
              <el-table-column prop="deals" label="成交数" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import * as echarts from 'echarts'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)
const currentDate = computed(() => {
  const date = new Date()
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
  const weekDay = weekDays[date.getDay()]
  return `${year}年${month}月${day}日 星期${weekDay}`
})

const dateRange = ref([])
const trendChart = ref()
const sourceChart = ref()

const pendingCustomers = ref([
  { name: '北京科技有限公司', contact: '13800138000', nextFollow: '2024-01-15' },
  { name: '上海贸易集团', contact: '13900139000', nextFollow: '2024-01-16' },
  { name: '广州电子科技', contact: '13700137000', nextFollow: '2024-01-17' }
])

const performanceRank = ref([
  { rank: 1, name: '张三', amount: '¥580,000', deals: 12 },
  { rank: 2, name: '李四', amount: '¥520,000', deals: 10 },
  { rank: 3, name: '王五', amount: '¥480,000', deals: 9 }
])

const initTrendChart = () => {
  const chart = echarts.init(trendChart.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['销售额', '回款额']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '销售额',
        type: 'line',
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
      },
      {
        name: '回款额',
        type: 'line',
        smooth: true,
        data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149]
      }
    ]
  }
  chart.setOption(option)
}

const initSourceChart = () => {
  const chart = echarts.init(sourceChart.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '客户来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '网络推广' },
          { value: 735, name: '客户推荐' },
          { value: 580, name: '线下活动' },
          { value: 484, name: '电话营销' },
          { value: 300, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

onMounted(() => {
  initTrendChart()
  initSourceChart()
  
  window.addEventListener('resize', () => {
    echarts.getInstanceByDom(trendChart.value)?.resize()
    echarts.getInstanceByDom(sourceChart.value)?.resize()
  })
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  .dashboard-header {
    margin-bottom: 20px;
    
    h2 {
      margin: 0 0 10px 0;
      color: #333;
    }
    
    p {
      margin: 0;
      color: #666;
    }
  }
  
  .dashboard-stats {
    margin-bottom: 20px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          
          .el-icon {
            color: #fff;
            font-size: 24px;
          }
        }
        
        .stat-info {
          .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #333;
          }
          
          .stat-label {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
  
  .dashboard-charts {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
